<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <div id = "main" >
    <!--嵌入页面-->
        <div id="publicTop" class="publicTop">
            <iframe src="top.html" width="100%" height="100%" frameborder="0"></iframe>
        </div>

        <!--中间内容-->
    <div id = "content" class="content">
            <!--左侧标签-->
            <div id = "contentLeft" class="content_left">
                <div class="title" class="title">
                    <span style="font-size: 30px">正在热映（44部）</span>
                    <span>全部</span>
                </div>
            <ul>
                <li v-on:click="goDetails(item.id)" v-for="item in movieList">
                    <div class="movieInfo">
                        <img class="movieImg" v-bind:src="'../movieImg/'+item.movieImgPath" >
                        <div class="info">
                            <div class="movieName">
                                {{item.movieName}}
                            </div>
                            <div class="score">
                                9.5
                            </div>
                        </div>
                    </div>
                    <div class="ticketBuy">
                        购票
                    </div>
                </li>

            </ul>

            <!--右侧标签-->
            </div>
            <div od = "contentRight" class="content_right">
                <div class="title" class="title">
                    <span style="font-size: 30px;color: red;margin-left: 25px" >今日票房</span>
                </div>
                <div id="topHot" class="topHot" style="display: flex;align-content: center ">
                    <img src="../movieImg/one.jpg" style="width: 30% ;height: 80%; display: flex;margin-left: 10px">
                    <div class="movieName">{{movieList[0].movieName}}</div>
                    <div style="color: red">{{movieList[0].playingScore}}万</div>

                </div>
                <li v-for="(item,index) in movieList.slice(1,8)">
                    <span class="movieName" style="margin-left:20px">{{index+1}}.{{item.movieName}}</span>
                    <span style="color: #d5943e">{{item.playingScore}}万</span>
                </li>
            </div>
        </div>
    </div>
<script src="../js/vue.js"></script>  <!--上一级的上一级目录-->
<script src="../js/axios.main.js"></script>
<script>
    var main =new Vue({
        el:"#main",
        data:{
            movieList:[]

        },
        methods:{
            getMovieList:function (){
                axios.get("http://localhost:8081/getMovieList")
                .then((result)=>{
                    this.movieList =result.data;
                    console.log(result)
                })
                .catch()
            },
            goDetails:function (id){
                //将电影参数传递给详情页
                location.href="details.html?id="+id;
            }
        },
        created(){
            this.getMovieList(this.id);
        }
    })
</script>
</body>
</html>